<!--
 * @Author: wjc
 * @Date: 2025-10-28 17:48:38
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-30 15:41:50
 * @Description: 
-->
<template>
  <div class="org-tree px-20px" :class="{ horizontal, collapsable }">
    <render
      :data="data"
      :props="fields"
      :horizontal="horizontal"
      :label-width="labelWidth"
      :collapsable="collapsable"
      :render-content="renderContent"
      :label-class-name="labelClassName"
      @on-expand="handleExpand"
      @on-node-click="handleNodeClick"
    />
  </div>
</template>

<script setup lang="ts">
  import render from './node'

  interface Fields {
    children: string
    expand: string
    label: string
  }

  defineOptions({
    name: 'OrgTree',
  })

  withDefaults(
    defineProps<{
      collapsable?: boolean
      data: any
      fields?: Fields
      horizontal?: boolean
      labelClassName?: () => string | void
      labelWidth?: number | string
      renderContent: () => void
    }>(),
    {
      data: {},
      labelClassName: () => '',
      labelWidth: '',
      fields: () => {
        return {
          label: 'label',
          expand: 'expand',
          children: 'children',
        }
      },
    }
  )
  const emits = defineEmits<{
    (e: 'on-node-click', event: Event, data: any): void
    (e: 'on-expand', event: any): void
  }>()

  const handleExpand = (e: any) => {
    emits('on-expand', e)
  }

  const handleNodeClick = (e: Event, data: any) => {
    emits('on-node-click', e, data)
  }
</script>

<style lang="scss">
  @import './org-tree.scss';
</style>
